@import "../../styles/variables";

.popper.dropdown {
  opacity: 0;
  transition-property: opacity, margin-top;
  transition-duration: $trans-speed;
  transition-timing-function: cubic-bezier(0.175, 0.35, 0.32, 1);

  &[x-placement^="bottom"] {
    margin-top: 0;
  }

  &[x-placement^="top"] {
    margin-top: 0;
    margin-bottom: 0;
  }

  &.is-active {
    opacity: 1;

    &[x-placement^="bottom"] {
      margin-top: $arrow-margin - 4px;
    }

    &[x-placement^="top"] {
      margin-top: -($arrow-margin - 4px);
    }
  }
}

.dropdown-content {
  padding: 0;
  margin: 0;
  border-radius: $border-radius;
}

.dropdown-dark {
  .dropdown-content {
    background-color: $dropdown-dark-bg;
  }

  .menu {
    padding: 8px;
    min-width: 208px;
    border-radius: $border-radius;
    background-color: $dropdown-dark-bg;
    box-shadow: $dropdown-menu-shadow;

    &-item {
      height: auto;
      border-radius: 3px;
      line-height: 20px;
      padding: 6px 19px 6px 12px;
      color: $dropdown-dark-text;
      font-size: $size-small;
      background-color: transparent;

      &:hover {
        background-color: $dropdown-menu-item-hover;
      }
    }
  }
}
